import { useState } from 'react'
import { memo } from 'react'

function CounterHook(props) {
  // 初始值只有第一次有效，hook只能子函数顶层使用或自定义hook中使用（使用use开头），不能在if，for中使用，并且只能在函数组件中使用
  const [counter, setCounter] = useState(0)

  return (
    <div>
      <h2>CounterHook Page</h2>
      <h3>当前计数：{counter}</h3>
      <button onClick={(e) => increment()}>+1</button>
      <button onClick={(e) => decrement()}>-1</button>
    </div>
  )

  function increment() {
    setCounter(counter + 1)
  }

  function decrement() {
    setCounter(counter - 1)
  }
}

export default memo(CounterHook)
